<!DOCTYPE html>
<html lang="zh-CN">

<!-- 文档头部 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人主页 - 全栈开发工程师张小明的个人网站">
    <meta name="theme-color" content="#3B82F6">
    <meta name="author" content="张小明">
    <meta name="keywords" content="全栈开发,React,Vue,Node.js,Django,Web开发">
    
    <!-- 标题 -->
    <title>张小明 | 全栈开发工程师</title>
    
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav id="navbar" class="navbar">
        <div class="container">
            <div class="navbar-container">
                <!-- 品牌标识 -->
                <a href="#" class="navbar-logo" aria-label="返回首页">
                    <span class="logo-icon">{ }</span>
                    <span>个人主页</span>
                </a>
                
                <!-- 桌面端导航链接 -->
                <div class="navbar-links">
                    <a href="#about" class="nav-link">关于我</a>
                    <a href="#projects" class="nav-link">项目</a>
                    <a href="#contact" class="nav-link">联系方式</a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menuBtn" class="menu-button" aria-label="打开菜单">
                    ☰
                </button>
            </div>
            
            <!-- 移动端导航菜单 -->
            <div id="mobileMenu" class="mobile-menu" role="menu">
                <a href="#about" class="mobile-nav-link" role="menuitem">关于我</a>
                <a href="#projects" class="mobile-nav-link" role="menuitem">项目</a>
                <a href="#contact" class="mobile-nav-link" role="menuitem">联系方式</a>
            </div>
        </div>
    </nav>

    <!-- 头部区域 -->
    <header class="hero-section">
        <div class="container">
            <div class="header-content">
                <!-- 头像 -->
                <img 
                    src="https://picsum.photos/id/64/400/400" 
                    alt="张小明的个人头像" 
                    class="avatar" 
                    loading="lazy"
                    width="140" 
                    height="140"
                >
                
                <!-- 个人信息 -->
                <h1 class="name">张小明</h1>
                <p class="profession">全栈开发工程师</p>
                
                <!-- 个人座右铭 -->
                <blockquote class="motto">
                    "持续学习，不断创新，让技术改变生活。"
                </blockquote>
                
                <!-- 社交媒体链接 -->
                <div class="social-links">
                    <a href="#" class="social-link github" aria-label="GitHub个人主页">GitHub</a>
                    <a href="#" class="social-link linkedin" aria-label="LinkedIn个人主页">LinkedIn</a>
                    <a href="#" class="social-link twitter" aria-label="Twitter个人主页">Twitter</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 关于我部分 -->
    <section id="about" class="section about-section">
        <div class="container">
            <h2 class="section-title">关于我</h2>
            
            <div class="about-content">
                <p class="about-text">
                    你好！我是张小明，一名充满热情的全栈开发工程师，拥有5年的Web开发经验。我专注于创建美观、高效且用户友好的Web应用程序。
                </p>
                
                <p class="about-text">
                    我精通前端技术栈（HTML5, CSS3, JavaScript, React, Vue）和后端技术（Node.js, Express, Python, Django），同时也熟悉数据库设计、API开发和云服务部署。
                </p>
                
                <p class="about-text">
                    除了技术能力，我还注重团队协作、问题解决和持续学习。我相信技术的力量可以创造出真正有价值的产品，改善人们的生活方式。
                </p>
            </div>
        </div>
    </section>

    <!-- 项目部分 -->
    <section id="projects" class="section projects-section">
        <div class="container">
            <h2 class="section-title">我的项目</h2>
            
            <div class="projects-grid">
                <!-- 项目卡片1 -->
                <article class="project-card">
                    <img 
                        src="https://picsum.photos/id/26/600/400" 
                        alt="电子商务平台项目截图" 
                        class="project-image" 
                        loading="lazy"
                        width="600" 
                        height="400"
                    >
                    
                    <div class="project-info">
                        <h3 class="project-title">电子商务平台</h3>
                        <p class="project-description">
                            基于React和Node.js开发的现代电子商务平台，支持产品浏览、购物车、支付等功能。
                        </p>
                        
                        <div class="project-tags">
                            <span class="tag tag-react">React</span>
                            <span class="tag tag-node">Node.js</span>
                        </div>
                        
                        <a href="#" class="project-link" aria-label="查看电子商务平台项目详情">
                            查看详情
                        </a>
                    </div>
                </article>
                
                <!-- 项目卡片2 -->
                <article class="project-card">
                    <img 
                        src="https://picsum.photos/id/0/600/400" 
                        alt="任务管理系统项目截图" 
                        class="project-image" 
                        loading="lazy"
                        width="600" 
                        height="400"
                    >
                    
                    <div class="project-info">
                        <h3 class="project-title">任务管理系统</h3>
                        <p class="project-description">
                            使用Vue.js和Django开发的任务管理系统，支持团队协作、任务分配和进度跟踪。
                        </p>
                        
                        <div class="project-tags">
                            <span class="tag tag-vue">Vue.js</span>
                            <span class="tag tag-django">Django</span>
                        </div>
                        
                        <a href="#" class="project-link" aria-label="查看任务管理系统项目详情">
                            查看详情
                        </a>
                    </div>
                </article>
                
                <!-- 项目卡片3 -->
                <article class="project-card">
                    <img 
                        src="https://picsum.photos/id/180/600/400" 
                        alt="数据可视化仪表盘项目截图" 
                        class="project-image" 
                        loading="lazy"
                        width="600" 
                        height="400"
                    >
                    
                    <div class="project-info">
                        <h3 class="project-title">数据可视化仪表盘</h3>
                        <p class="project-description">
                            基于React和ECharts开发的数据可视化仪表盘，提供实时数据监控和分析功能。
                        </p>
                        
                        <div class="project-tags">
                            <span class="tag tag-react">React</span>
                            <span class="tag tag-echarts">ECharts</span>
                        </div>
                        
                        <a href="#" class="project-link" aria-label="查看数据可视化仪表盘项目详情">
                            查看详情
                        </a>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <!-- 联系部分 -->
    <section id="contact" class="section contact-section">
        <div class="container">
            <h2 class="section-title">联系我</h2>
            
            <div class="contact-info">
                <div class="contact-item">
                    <div class="contact-icon email-icon" aria-hidden="true">✉️</div>
                    <div class="contact-details">
                        <h3 class="contact-label">邮箱</h3>
                        <p class="contact-value">example@example.com</p>
                    </div>
                </div>
                
                <div class="contact-item">
                    <div class="contact-icon phone-icon" aria-hidden="true">📞</div>
                    <div class="contact-details">
                        <h3 class="contact-label">电话</h3>
                        <p class="contact-value">+86 123 4567 8910</p>
                    </div>
                </div>
                
                <div class="contact-item">
                    <div class="contact-icon location-icon" aria-hidden="true">📍</div>
                    <div class="contact-details">
                        <h3 class="contact-label">地址</h3>
                        <p class="contact-value">北京市朝阳区</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p class="copyright">© 2023 张小明. 保留所有权利.</p>
                
                <div class="footer-social">
                    <a href="#" class="footer-social-link" aria-label="GitHub个人主页">GitHub</a>
                    <a href="#" class="footer-social-link" aria-label="LinkedIn个人主页">LinkedIn</a>
                    <a href="#" class="footer-social-link" aria-label="Twitter个人主页">Twitter</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 外部JavaScript -->
    <script src="scripts.js" defer></script>
</body>

</html>